import React from 'react';
import ServiceWrapper from 'beta/containers/layout/ServiceWrapper';
import UI from 'beta/store/ui';
import { IContext } from 'beta/typings/context';
import { inject, observer } from 'mobx-react';
import { useRouter } from 'next/router';
import { useServiceQuery } from 'typings/graphql';

import Report from './containers/report/Report';

type SundurlidunProps = {
  ui: UI;
};

const Sundurlidun = ({ ui }: SundurlidunProps) => {
  const router = useRouter();
  const { data } = useServiceQuery({
    variables: {
      serviceId: (router.query.serviceId as string) ?? '',
    },
  });
  const service = data?.service?.__typename == 'FiberService' ? data?.service : undefined;
  return (
    <ServiceWrapper>
      <Report color={ui?.serviceColor} serviceId={service?.id ?? ''} />
    </ServiceWrapper>
  );
};

Sundurlidun.getInitialProps = ({ pathname, query }: IContext) => {
  return {
    pathname,
    serviceId: query.serviceId,
    namespacesRequired: [],
  };
};

export default inject('ui')(observer(Sundurlidun));